<template>
  <div class="hot_list" >
      <div class="title" >
        <h3 class="title_name" >本周热文</h3>
        <div class="title_refresh" @click="gethotweeklist()">
          <i class=' iconfont icon-shuaxin'></i>
          <span>点击刷新</span>
        </div>
      </div>
      <div class="box" >

        <div class="item" v-for="(item,index) in hotweeklist " :key="item.cid" @click="goArticle(item.cid,item.uid)">
          <div class="item_left" >
            <span class="item_number" >{{index+1}}</span>
            <div class="item_info" >
              {{item.title}}
            </div>
          </div>
          <div class="item_right" >
            <span>{{item.fabulous_total>10000? item.fabulous_total_Str :''}}</span>
            <span v-if="item.hot_state.news" class="lable lable-news">新</span>
            <span v-else-if="item.hot_state.hot" class="lable lable-hot">热</span>
            <span v-else-if="item.hot_state.fei" class="lable lable-fei">沸</span>
          </div>
        </div>

      </div>

      <!-- <div class="more" >
        <div class="more_info ">
          查看完整榜单
        </div>
      </div> -->
    </div>
</template>

<script>
import http from '@/util/http'

export default {
  data () {
    return {
      hotweeklist: []
    }
  },
  mounted () {
    this.gethotweeklist()
  },
  methods: {
    // 跳转到文章详情页
    goArticle (cid, uid) {
      this.$router.push({ path: '/home/articleDetail', query: { cid, uid } })
    },
    // 获取数据的方法
    gethotweeklist () {
      http.gethotweek().then(res => {
        // console.log(res.data.hotweeklist)
        this.hotweeklist = res.data.hotweeklist
      })
    }
  }
}
</script>

<style lang="scss">
// 引入基础配置
@use "@/styles/init" as h;

.hot_list {
    width: 100%;
    background: h.$color;
    height: auto;
    border-radius: h.$border-radius5;

    .title {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgb(241, 241, 241);
        padding: 10px 5%;

        .title_name {
            display: block;
            font-weight: normal;
            font-size: 14px;
            font-family: h.$font-family;
            color: h.$title-one-color;
        }

        .title_refresh {
            font-size: 12px;
            font-family: h.$font-family;
            color: h.$title-three-color;
            padding: 1px 0;
            cursor: pointer;

            span {
                margin-left: 5px;
            }
        }
    }

    .box {
        width: 90%;
        height: auto;
        margin: 0 auto;
        $color-list: (
            #ff6f00,
            #ff8f00,
            #ffa000,
            #ffb300,
            #ffc107,
            #e9b723,
            #dbb844,
            #c6ae64,
            #9b8f6d,
            #8d8d8d,
        );

        @each $var in $color-list {
            $i: index($color-list, $var);

            .item:nth-child(#{$i})>.item_left>.item_number {
                color: $var  !important;
            }
        }

            .item {
                width: 100%;
                border-bottom: 1px solid rgb(245, 245, 245);
                height: 24px;
                line-height: 24px;
                background: white;
                padding: 6px 0;
                display: flex;
                justify-content: space-between;

                .item_left {
                    display: flex;

                    .item_number {
                        display: block;
                        width: 18px;
                        height: 18px;
                        font-size: 15px;
                        font-family: h.$font-family;
                        font-weight: 700;
                        margin: 6px 0;
                        line-height: 18px;
                        text-align: center;

                        border-radius: 4px;
                    }

                    .item_info {
                        width: 150px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #333;
                        font-size: 12px;

                        font-family: h.$font-family;
                        margin-left: 10px;
                        cursor: pointer;
                        &:hover{
                          color: #ff6f00;
                        }
                    }
                }

                .item_right {
                    margin-right: 2px;
                    color: h.$title-three-color;
                    font-size: 12px;
                    font-family: h.$font-family;
                    .lable{
                      width: 16px;
                      height: 16px;
                      padding: 0 2px;
                      border-radius: 4px;
                      margin-left: 4px;
                      color: rgb(237, 237, 237);
                      font-size: 12px;
                      font-weight: 500;
                    }
                    .lable-news{
                      background: #ff3852;
                    }
                    .lable-hot{
                      background: #ff9406;
                    }
                    .lable-fei{
                      background: #f96c00;
                    }
                }
            }
        }

    .more{
        width: 100%;
        text-align: center;
        margin: 15px 0;
        padding-bottom: 15px;

        .more_info{
            font-size: 14px;
            font-family: h.$font-family;
            color: h.$title-two-color;
            cursor: pointer;
            &:hover{
                color: h.$main-color;
            }
        }
    }

    }
</style>
